Implementing Optimistic UI Updates in RTK Query and Thunks
Optimistic UI updates make the application feel faster by updating the UI immediately before the server confirms the change. If the request fails, the state is rolled back to its previous value. Both RTK Query and createAsyncThunk can handle optimistic updates, though RTK Query simplifies the process through its built-in onQueryStarted lifecycle method.
1. Use onQueryStarted: Inside a mutation endpoint, perform temporary cache updates before the server response.
2. Update Query Data: Use
api.util.updateQueryData()to modify the cache for the relevant query.3. Rollback on Error: Use the
patchResult.undo()method if the mutation fails to revert the UI state.
1. Dispatch an Immediate State Change: Update the local slice before the API call resolves.
2. Handle Errors Gracefully: Revert to the old state in the
rejectedreducer case if the request fails.
RTK Query is ideal for optimistic updates because it handles cache invalidation and rollback automatically. Thunks are more flexible for custom logic but require manual state management. The choice depends on whether your data flow is cache-based (RTK Query) or business logic–driven (Thunk).